<template>
    <div class="contion">
        <div class="cart">
            <el-icon :size="30" @click="back"><ArrowLeftBold /></el-icon>
            <span style="margin-left:150px;font-size:20px;"><b>购物车</b></span>
        </div>
        <div class="cartlist">
            <div v-for="(j,k) in cartlist.data" :key="k" class="cartlist_1">
                <img :src="j.good.image" class="image">
                <div style="margin-top:10px;">
                    <div style="display:flex;flex-direction:row;">
                        <div style="width:100px">{{ j.good.name }}</div>
                        <el-icon style="margin-left:100px;color:#FF2442" :size="20" @click="del(j.id)"><DeleteFilled /></el-icon>
                    </div>
                    <div class="cartlist_2">
                        <div style="width:100px;margin-right:70px">￥{{ j.good.price }}</div>
                        <van-stepper v-model="j.num" theme="round" button-size="22" disable-input @change="update(j.id, $event)" />
                    </div>
                </div>
            </div>
        </div>
        <div class="home">
            <div style="margin-top:10px;">
                <span style="margin-left: 210px;font-size:15px">总计：</span>
                <span style="color:#FF2442;font-size:15px;margin-right:10px;">￥{{ cartlist.total }}</span>
            </div>
           <el-button @click="pay">结算</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();

const back = () => {
    router.back();
}

let cartlist = ref([])
const user = localStorage.getItem('userid')
const getcart = () => {
    http.get(`/cart/?user=${user}`).then(res => {
        cartlist.value = res.data
        // console.log(res.data)
    })
}
const del = (id) => {
    http.delete(`/cart/?id=${id}`).then(res => {
        console.log(res)
        if (res.status === 200) {
            ElMessage.success('删除成功');
            getcart();
        }
    })
}

const update = (id, newQuantity) => {
    // 验证输入是否为有效的数字
    if (typeof newQuantity!== 'number') {
        ElMessage.error('输入的数量不是有效的数字');
        return;
    }

    http.put(`/cart/?id=${id}`, { num: newQuantity })
      .then(res => {
            if (res.status === 200) {
                ElMessage.success(res.data.msg);
                getcart(); // 重新获取购物车数据以更新总价等信息
            } else {
                ElMessage.error(res.data.msg);
            }
        })
      .catch(error => {
            ElMessage.error('请求出错，请稍后重试');
            console.error('更新商品数量时出错', error);
        });
};
const userid = localStorage.getItem("userid")
const pay = () =>{
    http.post("/order/", 
    {user:userid}).then(res=>{
        if(res.data.code == 200){
            ElMessage.success(res.data.msg)
            const orderid = res.data.data.order_id
            console.log(orderid)
            localStorage.setItem("orderid",orderid)
            http.post("/link/",{order:orderid}).then(res=>{
                console.log(res.data)
                if(res.data.code == 201){
                    ElMessage.error(res.data.msg)
                }
                else{
                    location.href=res.data.link
                }
            })
        }
        else{
            ElMessage.error('下单失败')
        }
    })
}

onMounted(() => {
    getcart()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.cart{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color:#fff;
    align-items: center;
    justify-content: center;
    top:0;
    color: #000;
    position: fixed;
    z-index: 100; /* 确保标签栏在内容之上 */
}

.cartlist{
    margin-top: 70px;
    background-color: #f8f8f8;
    margin-bottom: 70px;
}

.cartlist_1{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    margin-left: 20px;
    width: 90%;
    background-color: #FFF;
}

.image{
    width:100px; 
    height:100px;
    border-radius: 15px;
    margin-right: 20px;
}

.cartlist_2{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.cartlist_3{
    width: 30px;
    height: 25px;
    border: 1px darkgray solid;
    color:#555555;
    border-radius: 50%;
    margin-left: 120px;
    padding-top: 5px;
    text-align: center;
}

.home{
    width: 100%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    height: 60px;
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color:#FFF;
    padding-top: 10px;
    font-size: 18px;
    display: flex;
    flex-direction: row;
}

.home button{
    width: 100px;
    height: 40px;
    color:#FFF;
    background-color: #FF2442;
    border-radius: 20px;
    border: #FF2442 1px solid;
}
</style>